﻿<%@ Page Title="店铺档案" Language="C#" MasterPageFile="~/master/m.master" %>
    <script runat="server"></script>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
        <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                min-width: 800px;
            }

            th {
                color: gray;
            }

            * {
                padding: 0;
                margin: 0;
            }

            .fl {
                float: left;
            }

            .fr {
                float: right;
            }

            .weatherLeft {
                width: 40%;
                height: 300px;

                margin-right: 10px;
            }

            .city {
                width: 40%;
                height: 300px;
            }

            .centerLeft {
                font-size: 30px;
                font-weight: 900;
                border-right: 3px solid gray;
                padding: 15px;
            }

            .center {
                height: 100px;
                /*background:gray;*/
                margin-top: 30px;
                margin-bottom: 5px;
            }

            .centerRigth {
                margin: 15px;
            }


            .footCenter {
                font-size: 18px;
                padding: 22px;
                border-right: 3px solid gray;
            }

            .footRight {
                margin: 15px;
            }

            ul {
                list-style: none;
            }

            .ulList li {
                width: 110px;
                height: 190px;
                border: 1px solid gray;
                text-align: center;
                padding: 20px;
                background: black;
                color: white;
                opacity: .5;
            }


            .city p {
                border: 1px solid gray;
                margin-bottom: -1px;
                height: 30px;
                line-height: 30px;
                width: 120px;
                text-align: center;
            }

            input::-webkit-input-placeholder {
                /* placeholder颜色  */
                color: white;
                /* placeholder字体大小  */
                font-size: 14px;
                /* placeholder位置  */
                text-align: left;
            }

            .btn1 {
                height: 36px;
                width: 300px;
                background: gray;
                opacity: 0.5;
                border: 1px solid white;
                color: white;
                font-weight: bold;
                border-radius: 5px, 5px;
            }
            /*table*/

            .wrapper {

                position: relative;
                /*margin: 0 auto;*/
                top: 20px
            }


            .tab {
                /*border: 1px solid #ddd;*/
                border-bottom: 0;
                height: 36px;
                position: absolute;
                left: 15px;
                top: -33px;
            }

            th {
                color: white;
            }

            .wrapper .tab li {
                position: relative;
                float: left;
                width: 110px;
                height: 34px;
                line-height: 34px;
                font-size: 15px;
                text-align: center;
                cursor: pointer;
                border-top: 4px solid #fff;
                padding: 5px;
                border: 1px solid gray;
            }

            .tab span {
                position: absolute;
                right: 0;
                top: 10px;
                background: gray;
                width: 1px;
                height: 14px;
                overflow: hidden;
            }

            .products {
                /*width: 1002px;*/
                /*border: 1px solid #000;   */
                height: 200px;
            }

            .products .main {
                float: left;
                display: none;
            }

            .products .main.selected {
                display: block;
            }

            .tab li:hover {
                border: 1px solid wheat;
            }

            .tab li.active {
                /*border-color: gray;*/
                border-bottom: 0;
            }

            td {
                text-align: center;
            }

            .btn:hover {
                background-color: #26C9FF;
            }

            #tableColor {
                border: 1px solid gray;
            }

            .yun {
                font-size: 60px;
                color: white;
            }

            .city ul {
                width: 360px;
            }

            .city ul li {
                padding: 0 5px;
                height: 45px;
                /*border: 1px solid #000;*/
                float: left;
                line-height: 45px;
                text-align: center;
                cursor: pointer
            }

            .back {
                padding: 0 5px;
                height: 45px;
                /*border: 1px solid #000;*/
                line-height: 45px;
                text-align: center;
                cursor: pointer;
            }

            .city ul li:hover {
                background: #293846;
            }

            .ullist2 li .tody {
                margin-top: 10px 0;
            }
            /*边框设置*/
            /*.city ul li:last-child {
                border-right: 1px solid gray;
            }*/

            .contenter {
                width: 100%;
                height: 100%;
                background: #575748;
                color: white;
                font-family: "Microsoft Yahei";
                position: fixed;
                top: 0;
                left: 0;
                z-index: 200;
                opacity: 0.8
            }

            .bodyImg img {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
            }
        </style>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="main" Runat="Server">
        <div class="bodyImg">
            <!--<img src="../assets/imgxue.jpg" alt="">-->
        </div>
        <div class="contenter">
            <div class="container allocation  weather mains">
                <h4>中国天气网</h4>
                <div class="weatherLeft fl">

                    <div class="center">
                        <!--<dv class="centerLeft fl">广州</dv>
                <div class="centerRigth fl">
                    <p>
                        2017.06.14 星期三 
                    </p>
                    <p>15:10天气实况</p>
                </div>-->

                    </div>
                    <!--<div class="foot">
                <div class="footLeft fl glyphicon glyphicon-cloud yun"></div>
                <div class="footCenter fl">小雨&nbsp;28℃</div>
                <div class="footRight fl">
                    <p>当前温度:&nbsp;28℃</p>
                    <p>降水量:&nbsp;0.2ml</p>
                </div>
            </div>-->
                </div>
                <div class="city fr">

                    <p>城市天气</p>
                    <input class="btn1" type="text" name="" value="" placeholder="请输入城市名称"> <input class="btn btn-default"
                        type="submit" value="查询">

                    <ul>

                    </ul>
                </div>
            </div>

            <!--选项库-->
            <div class="wrapper container">
                <ul class="tab fl" id="tan">
                    <li class="tab-item active fl">48小时天气</li>
                    <li class="tab-item fl">未来4天天气</li>
                </ul>
                <div class="products">
                    <div class="main selected">
                        <ul class="ulList ullist1">
                            <!--<li class="fl">
                            <p>今天白天</p>
                            <p ><img src="" alt=""></p>
                            <p>28℃</p>
                            <p>小雨</p>
                        </li>

                        <li class="fl">
                            <p>今天白天</p>
                            <p class=" glyphicon glyphicon-cloud yun"></p>
                            <p>28℃</p>
                            <p>小雨</p>
                        </li>
                        <li class="fl">
                            <p>今天白天</p>
                            <p class=" glyphicon glyphicon-cloud yun"></p>
                            <p>28℃</p>
                            <p>小雨</p>
                        </li>
                        <li class="fl">
                            <p>今天白天</p>
                            <p class=" glyphicon glyphicon-cloud yun"></p>
                            <p>28℃</p>
                            <p>小雨</p>
                        </li>
                        <li class="fl">
                            <p>今天白天</p>
                            <p class=" glyphicon glyphicon-cloud yun"></p>
                            <p>28℃</p>
                            <p>小雨</p>
                        </li class="fl">-->


                        </ul>
                    </div>
                    <div class="main">
                        <ul class="ulList ullist2">
                            <!--<li class="fl">
                            <p>今天白天</p>
                            <p class=" glyphicon glyphicon-cloud yun"></p>
                            <p>28℃</p>
                            <p>小雨</p>
                        </li>

                        <li class="fl">
                            <p>今天白天</p>
                            <p class=" glyphicon glyphicon-cloud yun"></p>
                            <p>28℃</p>
                            <p>小雨</p>
                        </li>
                        <li class="fl">
                            <p>今天白天</p>
                            <p class=" glyphicon glyphicon-cloud yun"></p>
                            <p>28℃</p>
                            <p>小雨</p>
                        </li>
                        <li class="fl">
                            <p>今天白天</p>
                            <p class=" glyphicon glyphicon-cloud yun"></p>
                            <p>28℃</p>
                            <p>小雨</p>
                        </li>
                        <li class="fl">
                            <p>今天白天</p>
                            <p class=" glyphicon glyphicon-cloud yun"></p>
                            <p>28℃</p>
                            <p>小雨</p>
                        </li>
                        <li class="fl">
                            <p>今天白天</p>
                            <p class=" glyphicon glyphicon-cloud yun"></p>
                            <p>28℃</p>
                            <p>小雨</p>
                        </li>-->
                        </ul>
                    </div>

                </div>
            </div>
        </div>


    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="footer" Runat="Server">
        <script src="../assets/js/bootstrap.min.js"></script>
        <script src="../assets/js/plugins/layer/layer.min.js"></script>
        <script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script>
        <script src="../assets/js/city2.js"></script>
        <script>
            // var htmlimg ="<img src='"+"../assets/img/timg.jpg' alt=''>"
            // $(".bodyImg").append(htmlimg)
            $(function () {
                var valBtn1 = 0
                var cityName = "北京" //remote_ip_info['city'];

                wea();

                function wea() {
                    $(".tab li").click(function () {

                        $(this).addClass("active").siblings(".tab li").removeClass("active");

                        var index = $(this).index();
                        $(".products>div").eq(index).addClass("selected").siblings().removeClass(
                            "selected");
                    });
                    Y.API2('Weather', 'GetIpWeatherList', {
                        key: cityName

                    }, function (data) {
                        var weather = data[0]
                        var forecas = weather.forecastDetail

                        var time = data[0].WeatherDateTime.split("T", "1")

                        var timeitem = data[0].observeDetail.resultList[1].Values
                        //设置背景
                        var a = forecas[0].resultList[2].Values

                        // console.log( weather.observeDetail.resultList[2].Values)
                        //   weather.forecastDetail[0].resultList[ 1].Values

                        //这是设置的背景

                        if (a.indexOf("雨") >= 0) {
                            var htmlB = "<img src='../assets/img/wearth/yu.jpg' alt=''>"
                            $(".bodyImg").append(htmlB)
                        }
                        if (a.indexOf("晴") >= 0) {
                            var htmlB = "<img src='../assets/img/wearth/timg.jpg' alt=''>"
                            $(".bodyImg").append(htmlB)
                        }
                        if (a.indexOf("雾") >= 0) {
                            var htmlB = "<img src='../assets/img/wearth/wu.jpg' alt=''>"
                            $(".bodyImg").append(htmlB)
                        }
                        if (a.indexOf("云") >= 0) {
                            var htmlB = "<img src='../assets/img/wearth/yin.jpg' alt=''>"
                            $(".bodyImg").append(htmlB)
                        }
                        if (a.indexOf("阴") >= 0) {
                            var htmlB = "<img src='../assets/img/wearth/yin.jpg' alt=''>"
                            $(".bodyImg").append(htmlB)
                        }
                        if (a.indexOf("雪") >= 0) {
                            var htmlB = "<img src='../assets/img/wearth/xue.jpg' alt=''>"
                            $(".bodyImg").append(htmlB)
                        }
                        //当前天气显示
                        var html1 = " <div class='centerLeft fl'>" + weather.AreanName + "</div>" +

                            "<div class='centerRigth fl'>" +
                            "<p>" + time + "  " + weather.Week + "</p>" +
                            "<p>" + timeitem + " 天气实况" + "</p>" + " </div>"

                        $(".weatherLeft .center").append(html1)
                        // console.log(weather.forecastDetail)
                        var html2 = "<div class='foot'>" +
                            " <div class='fl'>" + "<img src='" + weather.forecastDetail[0].resultList[2]
                                .imgUrl + "' alt=''>" + "</div>" +
                            "<div class='footCenter fl'>" + weather.forecastDetail[0].resultList[2].Values +
                            " " + weather.forecastDetail[0].resultList[0].Values + "℃" + "</div>" +
                            "<div class='footRight fl'>" + "<p>" + "当前温度:" + weather.observeDetail.resultList[2].Values
                            + "℃" + "</p>" + "<p>" + "降水量:" +
                            weather.observeDetail.resultList[0].Values + "ml" + "</p>" + "</div>" +
                            "</div>"

                        $(".weatherLeft").append(html2)

                        var html3 = "<li class='fl'>" + "<p>" + "今天" + forecas[0].resultList[2].Keys +
                            "</p>" +
                            "<p class='tody1'>" + "<img src='" + forecas[0].resultList[2].imgUrl + "'" +
                            " alt=''>" +
                            "<p>" +
                            " <p>" + forecas[0].resultList[0].Values + "℃" + "</p>" +
                            "<p>" + forecas[0].resultList[2].Values + "</P>" +

                            "<li class='fl'>" + "<p>" + "今天" + forecas[0].resultList[3].Keys + "</p>" +
                            "<p class='tody1'><img src='" + forecas[0].resultList[3].imgUrl + "'" +
                            " alt=''>" +
                            "<p>" +
                            " <p>" + forecas[0].resultList[1].Values + "℃" + "</p>" +
                            "<p>" + forecas[0].resultList[3].Values + "</P>" +
                            "<li class='fl'>" + "<p>" + "明天" + forecas[1].resultList[2].Keys + "</p>" +
                            "<p class='tody1'>" + "<img src='" + forecas[1].resultList[2].imgUrl + "'" +
                            " alt=''>" +
                            "<p>" +
                            " <p>" + forecas[1].resultList[0].Values + "℃" + "</p>" +
                            "<p>" + forecas[1].resultList[2].Values + "</P>" +

                            "<li class='fl'>" + "<p>" + "明天" + forecas[1].resultList[3].Keys + "</p>" +
                            "<p class='tody1'><img src='" + forecas[1].resultList[3].imgUrl + "'" +
                            " alt=''>" +
                            "<p>" +
                            " <p>" + forecas[1].resultList[1].Values + "℃" + "</p>" +
                            "<p>" + forecas[1].resultList[3].Values + "</P>"
                        $(".ullist1").append(html3);

                        //选项卡  
                        var weatherCity = data[0].forecastDetail

                        for (var i = 0; i < weatherCity.length; i++) {
                            function getDateString(date) {
                                var year = date.getFullYear();
                                var month = date.getMonth() + 1;
                                var day = date.getDate(); // 当月的几号
                                var hour = date.getHours();
                                var min = date.getMinutes();
                                var sec = date.getSeconds();


                                month = month < 10 ? "0" + month : month;
                                day = day < 10 ? "0" + day : day;
                                hour = hour < 10 ? '0' + hour : hour;
                                min = min < 10 ? "0" + min : min;
                                sec = sec < 10 ? "0" + sec : sec;
                                strTime = month + "月" + (day + weatherCity[i].Sequence - 1) + "日"



                            }

                            var date = new Date();
                            getDateString(date);
                            strTime
                            console.log(weatherCity[i])
                            var resulWear = weatherCity[i].resultList



                            var html4 =
                                "<li class='fl'>" + "<p>" + strTime + resulWear[2].Keys + "</p>" +
                                "<p><img src='" + resulWear[2].imgUrl + "'" + " alt=''>" + "<p>" +
                                " <p>" + resulWear[0].Values + "℃" + "</p>" +
                                "<p>" + resulWear[2].Values + "</P>" + "</li>" +

                                "<li class='fl'>" + "<p>" + strTime + resulWear[3].Keys + "</p>" +
                                "<p><img src='" + resulWear[3].imgUrl + "'" + " alt=''>" + "<p>" +
                                " <p>" + resulWear[1].Values + "℃" + "</p>" +
                                "<p>" + resulWear[3].Values + "</P>" + "</li>"



                            $(".ullist2").append(html4);

                        }

                        //  for (var i = 0; i < weatherCity.length; i++) {
                        //  $.each(weatherCity, function (index, value) {

                        //                       resulWear.resultList[2].Keys     //白天温度
                        //                       resulWear.resultList[0].Values     //白天温度
                        //                       resulWear.resultList[2].Values     //白上天气
                        //                       resulWear.resultList[2].imgUrl     //白上图片
                        //                     //   dayWearth.push(value.resultList[0].Keys, value.resultList[0].Values, value.resultList[2].Values, value.resultList[2].imgUrl)
                        //                     //    console.log(dayWearth)
                        //                       resulWear.resultList[3].Keys   //晚上温度
                        //                       resulWear.resultList[1].Values     //晚上温度
                        //                       resulWear.resultList[3].Values     //晚上天气
                        //                       resulWear.resultList[3].imgUrl     //晚上图片
                        //                     console.log(value.resultList[3].imgUrl )




                        //     })
                        //  }
                    })
                }



                //二级联动部分
                function linkage() {
                    var sname = 0
                    var chengshi = 0
                    var cityArr = []
                    //这是第一级
                    for (var i = 0; i < provinceCityArea.length; i++) {
                        var html5 = "<li>" + provinceCityArea[i].name + "</li>"
                        $(".city ul").append(html5)

                    }

                    //这是第二级
                    $(".city ul li").click(function () {
                        sname = $(this).html()


                        for (var i = 0; i < provinceCityArea.length; i++) {
                            $.each(provinceCityArea, function (index, value) {
                                // console.log(k, y)
                                if (value.name == sname) {
                                    chengshi = value.city
                                }
                            })

                        }
                        for (var i = 0; i < chengshi.length; i++) {
                            $.each(chengshi, function (index, value) {
                                // console.log(k, y)
                                var cityArr1 = value.name
                                cityArr.push(cityArr1)
                                cityArr = ov3(cityArr)

                                $(".city ul li").remove()
                            })
                        }
                        for (i = 0; i < cityArr.length; i++) {
                            var htm = "<li class='cityList'>" + cityArr[i] + "</li>"
                            $(".city ul").append(htm)
                        }
                        var htm1 = "<div class='fr back'>" + "返回>>" + "</div>"
                        $(".city ul").append(htm1)
                    })
                    //这是动态创建的二级城市注册事件
                    $(".city ul").on("click", "li", function () {

                        $(".btn1").val($(this).html())
                        $(".city ul").children("div").remove();
                        $(".city ul").children("li").remove();
                        flag = true
                    })

                }

                //绑定事件
                //这是返回按钮
                $(".city ul").on("click", ".back", function () {
                    //  console.log("9999")
                    $(".back").remove();
                    $(".city ul").children("li").remove()
                    linkage();

                })
                var flag = true
                var flag1 = true
                $(".btn1").click(function () {
                    if (flag) {
                        linkage();
                        flag = false
                        flag1 = true
                    }

                    // $(".btn1").off("click")
                })

                //给查询按钮注册时间
                $(".btn").click(function () {
                    if (flag1) {
                        //这是二级联动的调用
                        cityName = $(".btn1").val()


                        $(".center").children('div').remove()
                        $(".weatherLeft .foot").children("div").remove()
                        $(".ullist1").children("li").remove()
                        $(".ullist2").children("li").remove()
                        $(".bodyImg").children("img").remove();
                        wea();
                    }



                    flag1 = false

                    // $(".btn").off("click")
                })

                //这是动态数据的调用

                //数组去重
                function ov3(a) {
                    var a1 = ((new Date).getTime())
                    var b = [],
                        n = a.length,
                        i, j;
                    for (i = 0; i < n; i++) {
                        for (j = i + 1; j < n; j++)
                            if (a[i] === a[j]) j = ++i
                        b.push(a[i]);
                    }

                    return b.sort(function (a, b) {
                        return a - b
                    });
                }
            })
        </script>
    </asp:Content>